<template>
  <UserLayout :active-index="'3'" :active-menu="'agent-houses'">
    <div class="agent-applications-content">
      <div class="applications-header">
        <h2>房源代理申请</h2>
        <p>查看您申请代理的房源状态</p>
      </div>

      <!-- 统计卡片 -->
      <div class="applications-stats">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon bg-blue">
                <Document />
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ totalApplications }}</div>
                <div class="stat-title">总申请数</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon bg-orange">
                <Clock />
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ pendingApplications }}</div>
                <div class="stat-title">待审核</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon bg-green">
                <CircleCheck />
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ approvedApplications }}</div>
                <div class="stat-title">已通过</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon bg-red">
                <CircleClose />
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ rejectedApplications }}</div>
                <div class="stat-title">已拒绝</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 申请列表 -->
      <div class="applications-list">
        <el-card class="list-card">
          <template #header>
            <div class="card-header">
              <span>代理申请列表</span>
              <el-button type="primary" @click="refreshApplications">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
            </div>
          </template>

          <el-table :data="applications" style="width: 100%" stripe>
            <el-table-column prop="id" label="申请ID" width="120" />
            <el-table-column prop="houseTitle" label="房源标题" width="200" />
            <el-table-column prop="houseAddress" label="房源地址" width="250" />
            <el-table-column prop="landlordName" label="房东" width="120" />
            <el-table-column prop="applyTime" label="申请时间" width="180" />
            <el-table-column prop="status" label="状态" width="120">
              <template #default="scope">
                <el-tag :type="getStatusType(scope.row.status)">
                  {{ getStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="scope">
                <el-button size="small" type="primary" @click="viewDetails(scope.row)">
                  查看详情
                </el-button>
                <el-button 
                  v-if="scope.row.status === 'rejected'"
                  size="small" 
                  type="warning" 
                  @click="reapply(scope.row)"
                >
                  重新申请
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination-wrapper">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50]"
              :total="applications.length"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </div>

      <!-- 详情对话框 -->
      <el-dialog v-model="dialogVisible" title="申请详情" width="600px">
        <div v-if="currentApplication" class="application-details">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="申请ID">{{ currentApplication.id }}</el-descriptions-item>
            <el-descriptions-item label="房源标题">{{ currentApplication.houseTitle }}</el-descriptions-item>
            <el-descriptions-item label="房源地址" :span="2">{{ currentApplication.houseAddress }}</el-descriptions-item>
            <el-descriptions-item label="房东">{{ currentApplication.landlordName }}</el-descriptions-item>
            <el-descriptions-item label="房东电话">{{ currentApplication.landlordPhone }}</el-descriptions-item>
            <el-descriptions-item label="申请时间">{{ currentApplication.applyTime }}</el-descriptions-item>
            <el-descriptions-item label="审核时间">{{ currentApplication.auditTime || '未审核' }}</el-descriptions-item>
            <el-descriptions-item label="状态" :span="2">
              <el-tag :type="getStatusType(currentApplication.status)">
                {{ getStatusText(currentApplication.status) }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
          
          <div v-if="currentApplication.rejectReason" class="reject-reason">
            <h4>拒绝原因</h4>
            <p>{{ currentApplication.rejectReason }}</p>
          </div>
          
          <div v-if="currentApplication.status === 'approved'" class="commission-info">
            <h4>佣金信息</h4>
            <p>代理佣金比例: {{ currentApplication.commissionRate }}%</p>
            <p>预计月收入: ¥{{ currentApplication.expectedIncome }}</p>
          </div>
        </div>
        
        <template #footer>
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button 
            v-if="currentApplication && currentApplication.status === 'approved'"
            type="success" 
            @click="startPromotion"
          >
            开始推广
          </el-button>
        </template>
      </el-dialog>
    </div>
  </UserLayout>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import UserLayout from '@/components/layout/UserLayout.vue'
import {
  Document,
  Clock,
  CircleCheck,
  CircleClose,
  Refresh
} from '@element-plus/icons-vue'

const router = useRouter()

// 分页
const currentPage = ref(1)
const pageSize = ref(10)

// 对话框控制
const dialogVisible = ref(false)
const currentApplication = ref(null)

// 统计数据
const totalApplications = ref(15)
const pendingApplications = ref(5)
const approvedApplications = ref(8)
const rejectedApplications = ref(2)

// 申请列表数据
const applications = ref([
  {
    id: 'APP001',
    houseTitle: '精装修两室一厅，拎包入住',
    houseAddress: '北京市朝阳区三里屯SOHO 2号楼1501室',
    landlordName: '张女士',
    landlordPhone: '13800138001',
    applyTime: '2024-01-15 10:30:00',
    auditTime: '2024-01-16 14:20:00',
    status: 'approved',
    commissionRate: 2.5,
    expectedIncome: 2125
  },
  {
    id: 'APP002',
    houseTitle: '温馨单间出租，独立卫浴',
    houseAddress: '北京市海淀区中关村大街1号院3号楼802室',
    landlordName: '李先生',
    landlordPhone: '13800138002',
    applyTime: '2024-01-14 09:45:00',
    auditTime: null,
    status: 'pending'
  },
  {
    id: 'APP003',
    houseTitle: '金融街核心地段三室一厅',
    houseAddress: '北京市西城区金融街35号楼1203室',
    landlordName: '王先生',
    landlordPhone: '13800138003',
    applyTime: '2024-01-13 08:20:00',
    auditTime: '2024-01-14 16:30:00',
    status: 'rejected',
    rejectReason: '该房源已有其他中介代理，暂不需要额外代理'
  }
])

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

// 获取状态类型
const getStatusType = (status) => {
  const types = {
    pending: 'warning',
    approved: 'success',
    rejected: 'danger'
  }
  return types[status] || ''
}

// 获取状态文本
const getStatusText = (status) => {
  const texts = {
    pending: '待审核',
    approved: '已通过',
    rejected: '已拒绝'
  }
  return texts[status] || status
}

// 查看详情
const viewDetails = (application) => {
  currentApplication.value = application
  dialogVisible.value = true
}

// 重新申请
const reapply = async (application) => {
  try {
    await ElMessageBox.confirm('确定要重新申请代理这个房源吗？', '确认操作', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    ElMessage.success('重新申请已提交，请等待审核')
    application.status = 'pending'
    application.auditTime = null
    application.rejectReason = null
  } catch {
    // 用户取消
  }
}

// 开始推广
const startPromotion = () => {
  ElMessage.success('开始推广房源')
  dialogVisible.value = false
  // 这里可以跳转到推广页面
}

// 刷新申请列表
const refreshApplications = () => {
  ElMessage.success('申请列表已刷新')
  // 这里应该重新获取数据
}
</script>

<style scoped>
.agent-applications-content {
  height: 100%;
  overflow-y: auto;
}

.agent-applications-content::-webkit-scrollbar {
  width: 8px;
}

.agent-applications-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.agent-applications-content::-webkit-scrollbar-thumb {
  background: rgba(74, 144, 226, 0.6);
  border-radius: 4px;
}

.agent-applications-content::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 144, 226, 0.8);
}

.applications-header {
  text-align: center;
  margin-bottom: 30px;
}

.applications-header h2 {
  color: #2c3e50;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.applications-header p {
  color: #7f8c8d;
  font-size: 16px;
  margin: 0;
}

/* 统计卡片 */
.applications-stats {
  margin-bottom: 30px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 8px 32px rgba(74, 144, 226, 0.15);
  border: 1px solid rgba(74, 144, 226, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  cursor: pointer;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(74, 144, 226, 0.25);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: white;
}

.stat-icon.bg-blue { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.stat-icon.bg-orange { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.stat-icon.bg-green { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.stat-icon.bg-red { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 5px;
}

.stat-title {
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 500;
}

/* 列表卡片 */
.applications-list {
  margin-bottom: 20px;
}

.list-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(74, 144, 226, 0.3);
  box-shadow: 0 8px 32px rgba(74, 144, 226, 0.15);
  backdrop-filter: blur(10px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #2c3e50;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 详情样式 */
.application-details {
  margin: 20px 0;
}

.reject-reason,
.commission-info {
  margin-top: 20px;
  padding: 15px;
  background: rgba(248, 249, 250, 0.8);
  border-radius: 8px;
  border-left: 4px solid #e74c3c;
}

.commission-info {
  border-left-color: #27ae60;
}

.reject-reason h4,
.commission-info h4 {
  color: #2c3e50;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
}

.reject-reason p,
.commission-info p {
  margin: 5px 0;
  line-height: 1.6;
  color: #555;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .applications-header h2 {
    font-size: 24px;
  }

  .stat-card {
    padding: 15px;
  }

  .stat-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .stat-value {
    font-size: 24px;
  }
}
</style>
